<template>
  <div class="contentBottom">
    <div class="icon_box appointment" :class="{spotOne: true}"><span class="title">预约</span></div>
    <div class="icon_box inout" :class="{spotTwo: true}"><span class="title">出入</span></div>
    <div class="icon_box parking" :class="{spotThree: true}"><span class="title">停车场</span></div>
    <div class="icon_box camera" :class="{spotFour: true}"><span class="title">监控</span></div>
    <div class="icon_box chargingPost" :class="{spotFive: true}"><span class="title">充电桩</span></div>
  </div>
</template>
<script>
  export default {
    name: 'contentBottom',
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    }
  }
</script>
<style scoped>
  .icon_box {
    /* display: inline-block; */
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background-size: 100% 100%;
    position: absolute;
  }
  .appointment {
   /* top: -30px;
    left: 50%;
    transform: translateX(-50%); */
    background-image: url(../../../assets/appointment.png);
  }
  .parking {
    /* top: -12px;
    right: 28%;
    transform: translateX(-50%); */
    background-image: url(../../../assets/parking.png);
  }
  .inout {
   /* top: 32px;
    right: 15%;
    transform: translateX(-50%); */
    background-image: url(../../../assets/inOut.png);
  }
  .camera {
    /* top: -12px;
    left: 28%;
    transform: translateX(50%); */
    background-image: url(../../../assets/camera.png);
  }
  .chargingPost {
    /* top: 32px;
    left: 15%;
    transform: translateX(50%); */
    background-image: url(../../../assets/chargingPost.png);
  }
  .spotOne {
    position: absolute;
    top: 3.6rem;
    left: 19%;
    transform: translateX(50%);
  }
  .spotTwo {
    position: absolute;
    top: -1.8rem;
    left: 50%;
    width: 9rem;
    height: 9rem;
    transform: translateX(-23rem);
  }
  .spotThree {
    position: absolute;
    top: -6.2rem;
    left: 50%;
    width: 12.4rem;
    height: 12.4rem;
    transform: translateX(-50%);
  }
  .spotFour {
    position: absolute;
    top: -1.8rem;
    left: 50%;
    width: 9rem;
    height: 9rem;
    transform: translateX(15rem);
  }
  .spotFive {
    position: absolute;
    top: 3.6rem;
    right: 18%;
    transform: translateX(-50%);
  }
  .title {
    display: inline-block;
    color: #11FAFF;
    font-size: 14px;
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    text-align: center;
  }

</style>
